<!DOCTYPE html>
<html lang="zh_CN">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>搜索</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1">
    <!-- <link rel="shortcut icon" href="http://favicon.ico"> -->
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="viewport"
        content="width=device-width, height=device-height, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">

    <!--<link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.6.2/css/sm-extend.min.css">-->

    <!-- 固定的css 和 common.js 的引用    -->
    <link rel="stylesheet" href="http://47.104.254.28/commonfile/css/sm.min.css">
    <!-- <link rel="stylesheet" href="http://47.104.254.28/commonfile/css/sm-extend.min.css"> -->
    <script src="http://47.104.254.28/commonfile/js/js/swiper/swiper.min.js"></script>
    <link rel="stylesheet" href="http://47.104.254.28/commonfile/css/swiper.min.css">
    <link rel="stylesheet" href="http://47.104.254.28/commonfile/css/common.css">
    <script type="text/javascript" src="http://47.104.254.28/commonfile/common/common/common.js"></script>
    <!-- <script type="text/javascript" src="../../common/common/common.js"></script> -->

    <!-- <script type="text/javascript" src="http://47.104.254.28/commonfile/js/js/vconsole.min.js"></script>
		<script>
			var vConsole = new VConsole();
		</script> -->
    <!--banner-->

    <style type="text/css">
        .content {
            background: #fff;
        }

        .list-block {
            display: none;
            margin: 0;
            background: #fff;
        }

        .list-block ul:before {
            display: none;
        }

        .list-block .item-inner:after {
            pointer-events: none;
        }

        .list-block.media-list .item-inner {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: flex-start;
            padding-right: 1rem;
            margin-left: 0.5rem !important;
        }

        .list-block.media-list .item-title {
            font-size: 16px;
            font-weight: 400;
            color: #1a1a1a;
        }

        .item-media img {
            width: 5rem;
            height: 3rem;
            object-fit: contain;
        }

        .list-block .item-text {
            height: 1rem;
            color: #1a1a1a;
        }

        .searchbar-box {
            height: 2.2rem;
        }

        .searchbar {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            box-sizing: border-box;
            display: flex;
            align-items: center;
            padding: 0 0.675rem;
            background: #fff;
            z-index: 100;
            overflow: hidden;
        }

        .searchbar::after {
            content: '';
            position: absolute;
            left: 0;
            bottom: 0;
            right: auto;
            top: auto;
            height: 1px;
            width: 100%;
            background-color: #e7e7e7;
            display: block;
            z-index: 15;
            transform-origin: 50% 100%;
            transform: scaleY(.5);
        }

        .searchbar .search-input {
            flex: 1;
        }

        .search-qrcode {
            display: flex;
            align-items: center;
            font-size: 0.7rem;
            margin-left: 0.675rem;
            padding: 0.2rem 0 0.1rem;
        }

        .history {
            box-sizing: border-box;
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 100%;
            padding: 1.25rem 0.6rem;
        }

        .history .history-title {
            flex: 1;
            height: 0.8rem;
            font-size: 0.75rem;
            font-weight: 600;
            color: #333;
            text-align: left;
            line-height: 0.8rem;
        }

        .history .delete {
            display: flex;
            align-items: center;
            font-size: 0.7rem;
            color: #999;
        }

        .history .delete .text {
            padding-top: 0.15rem;
        }

        .label-box {
            display: flex;
            flex-wrap: wrap;
            width: 100%;
            padding: 0 0.6rem 0 0;
        }

        .label-box .label {
            max-width: 50%;
            min-width: 1.875rem;
            height: 1.85rem;
            margin: 0 0 0.6rem 0.6rem;
            padding: 0.1rem 0.75rem 0;
            line-height: 1.85rem;
            text-align: center;
            font-size: 0.75rem;
            background: #f8f8f8;
            border-radius: 1.85rem;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    </style>


</head>

<body>
    <div class="page-group">
        <div class="page page-current">
            <div class="content infinite-scroll infinite-scroll-bottom" data-distance="100">

                <div class="searchbar-box">
                    <div class="searchbar">
                        <div class="search-input">
                            <label class="icon icon-search"></label>
                            <input type="search" id='search' placeholder='输入关键字...' />
                        </div>
                        <div class="search-qrcode">搜索</div>
                    </div>
                </div>

                <div class="history-list">
                    <div class="history">
                        <div class="history-title ">搜索历史</div>
                        <div class="delete">
                            <span class="icon icon-remove"></span>
                            <span class="text">清除</span>
                        </div>
                    </div>
                    <div class="label-box"></div>
                </div>

                <div class="list-block media-list">
                    <ul id="article-list"></ul>
                    <!-- 加载提示符 -->
                <div class="infinite-scroll-preloader">
                    <div class="preloader"></div>
                </div>
                </div>
            </div>

        </div>
    </div>





    <!-- 固定的js引用，所有的jQuery 要用 $$ 表示 -->
    <script type="text/javascript" src="http://47.104.254.28/commonfile/js/js/jquery-1.11.1.min.js"></script>
    <!-- 这一行代码是为了 避免js冲突 -->
    <script type="text/javascript">var $$ = jQuery.noConflict();</script>
    <script type='text/javascript' src='http://47.104.254.28/commonfile/zepto/zepto/zepto.min.js'
        charset='utf-8'></script>
    <script type='text/javascript' src='http://47.104.254.28/commonfile/js/js/sm.min.js' charset='utf-8'></script>
    <!-- <script type='text/javascript' src='http://47.104.254.28/commonfile/js/js/sm-extend.min.js'
        charset='utf-8'></script> -->


    <script type="text/javascript">
        // 函数区域，函数放在“初始化区域的上面”
        //一般app 初始化 html 传参数，函数名固定
        //function getParams(data){
        //  // data需要转成json调用 ，函数urlParamParseJson();
        //  var parms = urlParamParseJson(data);
        //  //网络请求框架，需要传入成功函数回调和 失败函数回调
        //  net_request('get','api/v1/banners',params,successCallBack,errorCallBack);
        //}
        function getParams(data) {
            let datas = urlParamParseJson(data);
            if (isNotNull(datas.searchhot)) {
                $('#search').val(decodeURIComponent(datas.searchhot));
            }
        }
        var loading = false;
        var itemsPerLoad = 15;
        var searchVal = '';

        $(document).on('infinite', '.infinite-scroll-bottom', function () {

            // 如果正在加载，则退出
            if (loading) return;

            // 设置flag
            loading = true;
            getBook();
        });
        function getBook() {
            net_request('get', 'api/v1/books', {
                offset: $('.artice_li').length,
                limit: itemsPerLoad,
                book_name: searchVal
            }, articleSuccessCallBack, articleErrorCallBack);
        }

        function articleSuccessCallBack(data) {
            loading = false;
            if (isNotNull(data)) {
                //        console.log(data);
                if (data.success == true) {
                    //        console.log(data);
                    var curval = data.data;
                    // isNotNull() 用来判断字段不为空
                    if (isNotNull(curval)) {
                        $('.list-block').show();
                        let liHtml = ''
                        for (let val of curval) {
                            liHtml += `<li class="artice_li" data-id="${val.id}">
                                        <div class="item-content">
                                        <div class="item-media"><img src="${val.book_img ? val.book_img : 'http://47.104.254.28/commonfile/img/img/article_null.jpg'}"></div>
                                        <div class="item-inner">
                                            <div class="item-title-row">
                                            <div class="item-title">${val.book_name}</div>
                                            </div>
                                            <div class="item-text">${val.created_at}</div>
                                        </div>
                                        </div>
                                    </li>`
                        }
                        $$('#article-list').append(liHtml);
                        $.refreshScroller();

                        $('.artice_li').on('click', function (e) {
                            console.log($(this).data('id'))
                            e.stopPropagation();
                            native_goto("local/bookIndex?book_id=" + $(this).data('id'));
                        })

                        if (curval.length < itemsPerLoad) {
                            $.detachInfiniteScroll($('.infinite-scroll'));
                            // 删除加载提示符
                            $('.infinite-scroll-preloader').remove();
                        }

                    } else {
                        $.toast('暂无更多搜索内容')
                        $.detachInfiniteScroll($('.infinite-scroll'));
                        // 删除加载提示符
                        $('.infinite-scroll-preloader').remove();
                    }
                }
            } else {
                $.toast('暂无更多搜索内容')
                  // 加载完毕，则注销无限加载事件，以防不必要的加载
                $.detachInfiniteScroll($('.infinite-scroll'));
                // 删除加载提示符
                $('.infinite-scroll-preloader').remove();
            }
        }

        function articleErrorCallBack(data) {
            loading = false;
            console.log(data)
        }
        var historyList = [];

        function getHistoryList() {
            historyList = localStorage.getItem('historyList') ? JSON.parse(localStorage.getItem('historyList')) : []
            if (!historyList.length) {
                $('.history-list').hide();
                return false;
            }

            historyList = Array.from(new Set(historyList));

            if (historyList.length > 10) {
                historyList = historyList.slice(0, 10)
                localStorage.setItem('historyList', JSON.stringify(historyList))
            }

            let html = ''
            for (let val of historyList) {
                html += `<div class="label">${val}</div>`
            }
            $('.label-box').html(html);

            $('.label-box .label').on('click', function (e) {
                e.stopPropagation();
                searchVal = $(this).text();
                $('.history-list').hide();
                $('#article-list').html('');
                getBook();
            })
        }

        $('.search-qrcode').on('click', function (e) {
            e.stopPropagation();
            searchVal = $.trim($('#search').val());
            $('#search').val(searchVal);
            if (!isNotNull(searchVal)) {
                $.toast('请输入搜索的内容')
                return false;
            }
            historyList.unshift(searchVal);
            historyList = Array.from(new Set(historyList));
            localStorage.setItem('historyList', JSON.stringify(historyList))
            $('.history-list').hide();
            $('.list-block').hide();
            $('#article-list').html('');
            getBook();
        });

        $('.delete').on('click', function () {
            $('.history-list').hide();
            historyList = [];
            localStorage.removeItem('historyList');
        })

        // 初始化区域
        $$(function () {
            getHistoryList();

            $.init();
        });
    </script>
</body>

</html>